import * as React from "react";
import { createRoot } from "react-dom/client";

function FunctionComponent() {
  const [number, setNumber] = React.useState(0);
  return number === 0 ? (
    <ul key="container" onClick={() => setNumber(number + 1)}>
      <li key="A" id="A">
        A
      </li>
      <li key="B" id="B">
        B
      </li>
      <li key="C" id="C">
        C
      </li>
    </ul>
  ) : (
    <ul key="container" onClick={() => setNumber(number + 1)}>
      <li key="B" id="B2">
        B2
      </li>
    </ul>
  );
}

// function FunctionComponent() {
//   const [number, setNumber] = React.useState(0);
//   return number === 0 ? (
//     <div onClick={() => setNumber(number + 1)} key="title" id="title">
//       title
//     </div>
//   ) : (
//     <div onClick={() => setNumber(number + 1)} key="title" id="title2">
//       title2
//     </div>
//   );
// }

// function FunctionComponent() {
//   const [number, setNumber] = React.useState(0);
//   return number === 0 ? (
//     <div onClick={() => setNumber(number + 1)} key="title1" id="title">
//       title
//     </div>
//   ) : (
//     <div onClick={() => setNumber(number + 1)} key="title2" id="title2">
//       title2
//     </div>
//   );
// }

// function counter(state, action) {
//   if (action.type === "add") return state + action.payload;
//   return state;
// }
// function FunctionComponent() {
//   const [number, setNumber] = React.useReducer(counter, 0);
//   return (
//     <button
//       onClick={() => {
//         setNumber({ type: "add", payload: 1 }); //update1=>update2=>update3=>update1
//         setNumber({ type: "add", payload: 2 }); //update2
//         setNumber({ type: "add", payload: 3 }); //update3
//       }}
//     >
//       {number}
//     </button>
//   );
// }
// function FunctionComponent() {
//   console.log("FunctionComponent render");
//   const [number, setNumber] = React.useState(0);
//   return (
//     <button
//       onClick={() => {
//         setNumber((number) => number + 1);
//         setNumber((number) => number + 2);
//         setNumber((number) => number + 3);
//       }}
//     >
//       {number}
//     </button>
//   );
// }
let element = <FunctionComponent />;
const root = createRoot(document.getElementById("root"));
root.render(element);
